<template>
  <div>
  <el-card>
    <div style="display: flex; align-items: center;justify-content: space-between;">
      <el-page-header @back="goBack" content="发布贴子">
      </el-page-header>
      <el-button type="primary" icon="el-icon-plus" plain @click="submitForm">发布</el-button>
    </div>
  </el-card>
  <div style="border: 1px solid #ccc;">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="height: 395px; overflow-y: hidden;"
        v-model="postsForm.content"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
    />
  </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from "axios";
export default {
  components: { Editor, Toolbar },
  name: "ReleasePosts",
  data(){
    return{
      postsForm:{
        readerid:'',
        content:'',
        datetime:''
      },
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF:{
          uploadImage:{
            server: 'http://localhost:8888/notice/upload',
            fieldName: 'file',
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 5 * 1024 * 1024, // 1M

            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,

            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],
            headers:{
              Authorization:localStorage.getItem('token')
            },
            // 单个文件上传成功之后
            // onSuccess(file: File, res: any) {  // TS 语法
            onSuccess(file, res) {          // JS 语法
              console.log(`${file.name} 上传成功`, res)
            },
            // 单个文件上传失败
            // onFailed(file: File, res: any) {   // TS 语法
            onFailed(file, res) {           // JS 语法
              console.log(`${file.name} 上传失败`, res)
            },
            // 上传错误，或者触发 timeout 超时
            // onError(file: File, err: any, res: any) {  // TS 语法
            onError(file, err, res) {               // JS 语法
              console.log(`${file.name} 上传出错`, err, res)
            },
            // 自定义插入图片
            // customInsert(res: any, insertFn: InsertFnType) {  // TS 语法
            customInsert(res, insertFn) {                  // JS 语法
              // res 即服务端的返回结果
              console.log(res.data)
              // 从 res 中找到 url alt href ，然后插入图片
              insertFn(res.data, "", "")
            }
          },
          uploadVideo:{
            server: 'http://localhost:8888/notice/upload',
            fieldName: 'file',
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 200 * 1024 * 1024, // 5M

            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,

            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['video/*'],
            headers:{
              Authorization:localStorage.getItem('token')
            },
            // 单个文件上传成功之后
            // onSuccess(file: File, res: any) {  // TS 语法
            onSuccess(file, res) {          // JS 语法
              console.log(`${file.name} 上传成功`, res)
            },
            // 单个文件上传失败
            // onFailed(file: File, res: any) {   // TS 语法
            onFailed(file, res) {           // JS 语法
              console.log(`${file.name} 上传失败`, res)
            },
            // 上传错误，或者触发 timeout 超时
            // onError(file: File, err: any, res: any) {  // TS 语法
            onError(file, err, res) {               // JS 语法
              console.log(`${file.name} 上传出错`, err, res)
            },
            // 自定义插入图片
            // customInsert(res: any, insertFn: InsertFnType) {  // TS 语法
            customInsert(res, insertFn) {                  // JS 语法
              // res 即服务端的返回结果
              console.log(res.data)
              // 从 res 中找到 url alt href ，然后插入图片
              insertFn(res.data, "")
            }
          }
        }
      },
      mode: 'default',
    }
  },
  methods: {
    submitForm() {
      this.postsForm.datetime = this.getCurrentDate()
      this.postsForm.readerid = sessionStorage.getItem('id')
      axios.post('posts/addPosts',this.postsForm).then(res=>{
        if (res.data.success) {
          this.$message.success('发布成功')
          this.$router.push({ name: 'my_posts' });
        } else {
          this.$message.error('发布失败')
        }
      })
    },
    onCreated(editor) {
      this.editor = Object.seal(editor)
    },
    goBack() {
      window.history.back();
    },
    getCurrentDate() {
      const now = new Date();
      return now.toISOString();
    },
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>

</style>